<script setup>

import CardBox from "@/components/CardBox/index.vue";
import {useRouter} from "vue-router";
import {Download} from "@element-plus/icons-vue";
import {getGraduatedListApi} from "@/api/school.js";

const router = useRouter()

const {proxy} = getCurrentInstance();
const data = reactive({
  title: '新增',
  form: {},
  total: 0,
  tableData: [],
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    stuPlace:'',
    stuClass:'',
    stuName:'',
  },
});

const showDia1 = ref(false)
const selectable = (row) => ![].includes(row.id)
const handleAdd = () => {
  showDia1.value = true
}

const handleUploadSuccess = (response, file, fileList) => {
  console.log(response, file, fileList)
}

const handleEdit = (index) => {
  router.push('noticeEdit')
}

const handleJump = (type,row) => {
  const id = row.id
  if (type === 1) {
    router.push({
      path:'/honor/graduateManagement/schoolArchives',
      query: {
        stuId: id
      }
    })
  } else if (type === 2) {
    router.push('graduateQuality/jonHonors?id=' + id)
  }
}

const getDataList = async () => {
  const res = await getGraduatedListApi(data.queryParams)
  if (res.code == 200) {
    data.tableData = res.rows
    data.total = res.total
  }
}

const resetSearch = () => {
  proxy.resetForm("queryRef");
  data.queryParams = {
    pageNum: 1,
    pageSize: 10,
  }
  getDataList()
}


onMounted(() => {
  getDataList()
})

</script>

<template>
  <div class="outBox">
    <CardBox style="margin-bottom: 20px" title="筛选查询">
      <template #btn-cont>
        <el-button type="primary" @click="getDataList">查询</el-button>
        <el-button @click="resetSearch">重置</el-button>
      </template>
      <template #content>
        <el-form :model="data.queryParams" label-width="auto" inline="true">
          <el-form-item label="姓名">
            <el-input v-model="data.queryParams.stuName"/>
          </el-form-item>
          <el-form-item label="院系">
            <el-input v-model="data.queryParams.stuFaculties"/>
          </el-form-item>
          <el-form-item label="户籍地">
            <el-input v-model="data.queryParams.stuPlace"/>
          </el-form-item>
          <el-form-item label="联系电话">
            <el-input v-model="data.queryParams.stuPhone"/>
          </el-form-item>
        </el-form>
      </template>
    </CardBox>
    <CardBox title="毕业生质量查询">
      <template #btn-cont>
        <el-button type="primary">
          <el-icon>
            <Download/>
          </el-icon>
          <span>导出</span>
        </el-button>
      </template>
      <template #content>
        <el-table :data="data.tableData" style="width: 100%">
          <el-table-column type="selection" :selectable="selectable" width="55"/>
          <el-table-column label="序号" type="index" width="50" align="center"/>
          <el-table-column prop="stuName" label="姓名" align="center"/>
          <el-table-column prop="stuFaculties" label="院系" align="center"/>
          <el-table-column prop="stuClass" label="班级" align="center"/>
          <el-table-column prop="stuGradYear" label="毕业年份" align="center"  width="100"/>
          <el-table-column prop="stuPhone" label="联系电话" align="center"/>
          <el-table-column prop="stuPlace" label="户籍地" align="center"  width="200"/>
          <el-table-column prop="g" label="在校档案" align="center">
            <template #default="scope">
              <el-button type="primary" link @click="handleJump(1,scope.row)">查看详情</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="g" label="在职荣誉" align="center">
            <template #default="scope">
              <el-button type="primary" link @click="handleJump(2,scope.row)">查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="pageBox">
          <pagination
              v-show="data.total > 0"
              :total="data.total"
              v-model:page="data.queryParams.pageNum"
              v-model:limit="data.queryParams.pageSize"
              @pagination="getDataList"
          />
        </div>
      </template>
    </CardBox>
  </div>
</template>

<style scoped lang="scss">
.uploadBox {
  margin-left: 50px;
}

.footer {
  text-align: center;
}
</style>
